<h1>Generating Dynamic Markup</h1>

<div id="dh-about" class="sect">
	<h2>DomHelper</h2>
	<p>
		DomHelper（下简称DH）是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与innerHTML的操作，DH经充分考虑并在性能上有足够的优化。
	</p>	
	
	<p>Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法。</p>
	
	<ul>
		<li>markup-和过时的createHtml一样</li>
		
		<li>insertHtml</li>
		
		<li>insertBefore</li>
		
		<li>insertAfter</li>
		
		<li>insertFirst</li>
		
		<li>append</li>
		
		<li>overwrite</li>
						
	</ul>
	<p>DOM脚本编程:</p>
			
<pre>var myEl = document.createElement(<span class="string">'a'</span>);
myEl.href = <span class="string">'http://www.yahoo.com/'</span>;
myEl.innerHTML = <span class="string">'My Link'</span>;
myEl.setAttribute(<span class="string">'target'</span>, <span class="string">'_blank'</span>);

var myDiv = document.createElement(<span class="string">'div'</span>);
myDiv.id = <span class="string">'my-div'</span>;

myDiv.appendChild(myEl);
document.body.appendChild(myDiv);	
</pre>
	<p>使用Ext.DomHelper:</p>		
<pre>Ext.DomHelper.append(document.body, {
    id: <span class="string">'my-div'</span>,
    cn: [{
    	tag: <span class="string">'a'</span>, 
    	href: <span class="string">'http://www.yahoo.com/'</span>, 
    	html: <span class="string">'My Link'</span>, 
    	target: <span class="string">'_blank'</span>
    }]
});
</pre>			

</div>

<div id="dh-configs" class="sect">
	<h2>DomHelper配置项</h2>
	<p>
				DomHelper是根据DomHelper 配置项未决定生成在页面上的HTML，这DomHelper配置可视作任何HTML元素的等价物。
	</p>	
		<p>Markup:</p>
			<th width="50%"></th>
		<pre>&lt;a href=<span class="string">"http://www.extjs.com"</span>&gt;Ext JS&lt;/a&gt;</pre>
		<p>DomHelper配置项：</p>
		<pre>{
    tag: <span class="string">'a'</span>,
    href: <span class="string">'http://www.extjs.com'</span>,
    html: <span class="string">'Ext JS'</span>
}</pre>
	<p></p>
	
</div>


<div id="templates" class="sect">
	<h2>模板</h2>
	<p>
	Tpl模板、格式化函数，from的静态方法（对textarea有用）。
	</p>	
</div>
<div id="tpl-addl" class="sect">
	<h2>模板成员方法</h2>
	<p>
	添加和执行成员格式化函数。
	</p>	
</div>

